<template>
  <div id="md-scenariocontainer" class="m-scenario-container">
    <div id="md-senario">
      <div id="scenario-show" class="m-scenario-show f-clear">
        <dl
          id="vector"
          class="scenario-single vector"
          style="right: 0px;"
          @click="checkBaseGroup(0,baseMapGroup[0])"
          @mouseenter="scenarioshow"
          @mouseout="scenariohide"
        >
          <dt />
          <dd />
        </dl>
        <dl
          id="image"
          class="scenario-single image selected"
          style="right: 0px;"
          @click="checkBaseGroup(1,baseMapGroup[1])"
          @mouseenter="scenarioshow"
          @mouseout="scenariohide"
        >
          <dt />
          <dd />
        </dl>
        <dl
          id="dem"
          class="scenario-single dem"
          style="right: 0px;"
          @click="checkBaseGroup(2,baseMapGroup[2])"
          @mouseenter="scenarioshow"
          @mouseout="scenariohide"
        >
          <dt />
          <dd />
        </dl>
      </div>
      <div id="md-specialshowview" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "BaseMap",
  data() {
    return {
      showSelectBaseMap: false
    };
  },
  methods: {
    /**
     * 地图切换动画
     * @param $event
     * @param item
     */
    scenarioshow() {
      if (document.getElementById("image").classList.contains("imagehide")) {
        document.getElementById("image").classList.remove("imagehide");
      }
      if (document.getElementById("dem").classList.contains("demhide")) {
        document.getElementById("dem").classList.remove("demhide");
      }
      if (document.getElementById("image").classList.contains("imageshow")) {
        document.getElementById("image").classList.remove("imageshow");
      }
      if (document.getElementById("dem").classList.contains("demshow")) {
        document.getElementById("dem").classList.remove("demshow");
      }
      document.getElementById("image").classList.add("imageshow");
      document.getElementById("dem").classList.add("demshow");
    },
    scenariohide() {
      if (document.getElementById("image").classList.contains("imagehide")) {
        document.getElementById("image").classList.remove("imagehide");
      }
      if (document.getElementById("dem").classList.contains("demhide")) {
        document.getElementById("dem").classList.remove("demhide");
      }
      if (document.getElementById("image").classList.contains("imageshow")) {
        document.getElementById("image").classList.remove("imageshow");
      }
      if (document.getElementById("dem").classList.contains("demshow")) {
        document.getElementById("dem").classList.remove("demshow");
      }
      document.getElementById("image").classList.add("imagehide");
      document.getElementById("dem").classList.add("demhide");
    },

    /**
     * 选择基础底图
     * @param $event
     * @param item
     */
    checkBaseGroup($event, item) {
    //   if (item.checked) {
    //     return;
    //   }
      if (document.getElementById("vector").classList.contains("selected")) {
        document.getElementById("vector").classList.remove("selected");
      }
      if (document.getElementById("image").classList.contains("selected")) {
        document.getElementById("image").classList.remove("selected");
      }
      if (document.getElementById("dem").classList.contains("selected")) {
        document.getElementById("dem").classList.remove("selected");
      }
      if ($event === 0) {
        document.getElementById("vector").classList.add("selected");
      } else if ($event === 1) {
        document.getElementById("image").classList.add("selected");
        //this.bus.$emit("onBaseLayerChanged", ["5eec7dd8530523292895f5cc"]);
      } else if ($event === 2) {
        document.getElementById("dem").classList.add("selected");
      }

      this.mapServiceLeft.addBaseLayer(item.layers);
      this.mapServiceRight.addBaseLayer(item.layers);
      this.baseMapGroup.forEach(group => {
        this.$set(group, "checked", group._id === item._id);
      });
    },
    mapInitComplete() {
      this.mapServiceLeft.addBaseLayer(this.baseLayers);
      this.mapServiceRight.addBaseLayer(this.baseLayers);
    }
  },
  mounted() {
    this.mapServiceRight.on("map.init", this.mapInitComplete, this);
  },
  beforeDestroy() {
    this.mapServiceRight.off("map.init", this.mapInitComplete, this);
  },
  computed: {
    ...mapState({
      // 底图分组
      baseMapGroup(state) {
        return state.user.baseGroup;
      },

      mapService(state) {
        return state.xcgl.mapService;
      },
      // 默认显示图层
      baseLayers(state) {
        return state.user.xcglBaseLayers;
      },

      mapServiceLeft(state) {
        return state.xcgl.mapServiceLeft;
      },
      mapServiceRight(state) {
        return state.xcgl.mapServiceRight;
      }
    })
  }
};
</script>

<style>
.vector dd {
  background: url(../../../../assets/img/yzt/vector.jpg);
  margin: 0;
}

.image dd {
  background: url(../../../../assets/img/yzt/image.jpg);
  margin: 0;
}

.dem dd {
  background: url(../../../../assets/img/yzt/terrain.jpg);
  margin: 0;
}
</style><style scoped>
.m-scenario-container {
  position: absolute;
  right: 15px;
  bottom: 30px;
  z-index: 200;
}

.m-scenario-show {
  height: 79px;
}

.f-clear {
  zoom: 1;
}

.m-scenario-container dl.selected {
  z-index: 20000;
}

.m-scenario-container dl {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.m-scenario-container .scenario-single dd {
  width: 134px;
  height: 79px;
}

.imageshow {
  animation-name: imageshow;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes imageshow {
  0% {
    right: 0px;
  }

  25% {
    right: 45px;
  }

  50% {
    right: 90px;
  }

  100% {
    right: 134px;
  }
}

.demshow {
  animation-name: demshow;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes demshow {
  0% {
    right: 0px;
  }

  25% {
    right: 90px;
  }

  50% {
    right: 180px;
  }

  100% {
    right: 268px;
  }
}

.imagehide {
  animation-name: imagehide;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes imagehide {
  0% {
    right: 134px;
  }

  25% {
    right: 90px;
  }

  50% {
    right: 45px;
  }

  100% {
    right: 0px;
  }
}

.demhide {
  animation-name: demhide;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes demhide {
  0% {
    right: 268px;
  }

  25% {
    right: 180px;
  }

  50% {
    right: 90px;
  }

  100% {
    right: 0px;
  }
}
</style>
